<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/business/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script><![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>折线图 - 系统统计 - h-ui.admin.pro v1.0</title>
    <meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<div class="wap-container">
    <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
        首页
        <span class="c-gray en">/</span>
        系统统计
        <span class="c-gray en">/</span>
        折线图
        <a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="Hui-admin-content clearfix">
        <div class="panel">
            <div class="panel-body">
                <div class="row clearfix">
                    <div class="col-xs-12">
                        <div class="panel">
                            <div class="panel-header">
                                折线图
                            </div>
                            <div class="panel-body">
                                <div class="Hui-admin-datetime-select">
                                    <span onclick="newUser('day',this)" class="active">天</span>
                                    <span onclick="newUser('week',this)">周</span>
                                    <span onclick="newUser('month',this)">月</span>
                                </div>
                                <div id="echarts-1" style="height: 400px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/echarts/4.1.0.rc2/echarts.min.js"></script>
<script type="text/javascript">
    function newUser(type, obj) {
        $(obj).parent().find("span").removeClass("active");
        $(obj).addClass("active");
        var xData = [];
        var yData1 = [];
        var yData2 = [];

        // 天
        if (type == 'day') {
            xData = [
                '2018-01-01',
                '2018-01-02',
                '2018-01-03',
                '2018-01-04',
                '2018-01-05',
                '2018-01-06',
                '2018-01-07',
                '2018-01-08',
                '2018-01-09',
                '2018-01-10',
                '2018-01-11',
                '2018-01-12',
                '2018-01-12',
                '2018-01-13',
                '2018-01-14',
                '2018-01-15',
                '2018-01-16',
                '2018-01-17',
                '2018-01-18',
                '2018-01-19',
                '2018-01-20',
                '2018-01-21',
                '2018-01-22',
                '2018-01-23',
                '2018-01-24',
                '2018-01-25',
                '2018-01-26',
                '2018-01-27',
                '2018-01-28',
                '2018-01-29',
                '2018-01-30',
                '2018-01-31',
            ];
            yData1 = [
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
            ];
            yData2 = [
                120,
                140,
                120,
                140,
                120,
                140,
                120,
                140,
                120,
                120,
                20,
                100,
                39,
                49,
                38,
                78,
                5,
                66,
                33,
                22,
                44,
                55,
                23,
                11,
                32,
                34,
                55,
                22,
                33,
                55,
                77,
            ];
        }

        // 周
        if (type == 'week') {
            xData = [];
            yData1 = [];
            yData2 = [];
        }

        // 月
        if (type == 'month') {
            xData = [];
            yData1 = [];
            yData2 = [];
        }
        var echarts1 = echarts.init(document.getElementById('echarts-1'));
        var echarts1_option = {
            title: {
                show: false,
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                x: 'center',
                y: 'top',
                data: ['会员', '非会员']
            },
            xAxis: {
                data: xData,
            },
            yAxis: {
                type: 'value',
                nameTextStyle: {
                    // 坐标轴名称的文字样式
                },
                axisLine: {
                    // 坐标轴轴线相关设置
                }
            },
            series: [
                {
                    name: '会员',
                    type: 'line',
                    symbolSize: 10,
                    symbol: 'circle',
                    itemStyle: {
                        color: '#1bb495',
                        bborderColor: '#fff',
                        borderWidth: 2,
                    },
                    data: yData1,
                },
                {
                    name: '非会员',
                    type: 'line',
                    symbolSize: 10,
                    symbol: 'circle',
                    itemStyle: {
                        color: '#25c6c8',
                        borderColor: '#fff',
                        borderWidth: 2,
                    },
                    data: yData2,
                }
            ]
        }
        echarts1.setOption(echarts1_option);
    }

    $(function () {
        newUser('day'); // 默认天
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
